<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入直播标题" v-model="searchParam.SEARCH_LIKE_title" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索</el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"
                             :width="column.width"
                             :align="column.align?column.align:'center'"
                             :min-width="column.minWidth"
                             :sortable="column.sortable"
                             :fixed="column.fixed"
                             :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         width="60" height="60" class="img" alt=""/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled/>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                    <!--默认显示文本-->
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="240" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleLive(scope.row.liveId)"> 直播间信息</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                    :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!-- 直播间信息-->
        <el-dialog :title="liveListName" :visible.sync="getLiveListVisible" :close-on-click-modal="false"
                   width="65%" top="5vh">
            <el-table v-loading="listLoadingLive" :data="tableListLive" border fit highlight-current-row
                      style="width: 100%;">
                <el-table-column
                    v-for="column in columnLive"
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    :align="column.align?column.align:'center'"
                    :min-width="column.minWidth"
                    :sortable="column.sortable"
                    :fixed="column.fixed"
                    :type="column.type"
                    :formatter="column.formatter">
                    <template slot-scope="scope">
                        <!-- 行内显示tag标签 -->
                        <span v-if="column.tagFlag==true">
                            <span v-for="item in column.tagFormatter" :key="item.value">
                                <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{
                                        item.text
                                    }}</el-tag>
                            </span>
                        </span>
                        <!-- 行内格式自定义 -->
                        <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                        <!--默认显示文本-->
                        <span v-else>{{ scope.row[column.prop] }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="240" class-name="small-padding">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleLiveUser(scope.row.userId)"> 主播信息
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="liveCloseDialog()">关闭</el-button>
            </div>
        </el-dialog>

        <!-- 主播信息-->
        <el-dialog :title="liveUserInfoName" :visible.sync="getLiveUserInfoVisible" :close-on-click-modal="false"
                   width="65%" top="5vh">
            <el-table v-loading="LoadingLiveUserInfo" :data="tableListLiveUserInfo" border fit highlight-current-row
                      style="width: 100%;">
                <el-table-column
                    v-for="column in columnLiveUserInfo"
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    :align="column.align?column.align:'center'"
                    :min-width="column.minWidth"
                    :sortable="column.sortable"
                    :fixed="column.fixed"
                    :type="column.type"
                    :formatter="column.formatter">
                    <template slot-scope="scope">
                        <img v-if="column.imgFlag==true" :src="scope.row[column.prop]" width="60" height="60"
                             class="img" alt="">
                        <!-- 行内显示tag标签 -->
                        <span v-else-if="column.tagFlag==true">
                            <span v-for="item in column.tagFormatter" :key="item.value">
                                <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{
                                        item.text
                                    }}</el-tag>
                            </span>
                        </span>
                        <!-- 行内格式自定义 -->
                        <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                        <!--默认显示文本-->
                        <span v-else>{{ scope.row[column.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="liveUserInfoCloseDialog()">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import {getJdLiveRecordList, getLiveInfo} from '@/api/modules/live'
import {getLiveUserInfo} from '@/api/modules/appUser'

export default {
    name: 'liveMange',
    components: {
        Pagination,
    },
    directives: {},
    filters: {},
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: {pageNum: 1, pageSize: 10,},
            searchParam: {},
            dialogFormVisible: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            editLoading: false,//保存表单时loading框
            columns: [
                // {prop: 'id', label: '', sortable: false},
                {prop: 'title', label: '直播标题', sortable: false},
                {prop: 'liveLogo', label: '封面图', sortable: false, imgFlag: true},
                // {prop: 'liveId', label: '主播id', sortable: false},
                {prop: 'startTime', label: '开始时间', sortable: false},
                {prop: 'endTime', label: '结束时间', sortable: false},
            ],

            liveId: '', // liveId
            //直播间信息
            liveListName: '直播间信息',
            getLiveListVisible: false, // 属性值列表页 隐藏
            dialogFormVisibleLive: false, // 默认不显示弹出框
            listLoadingLive: true,
            tableListLive: [], // 表格数据源
            columnLive: [
                {prop: 'liveNum', label: '直播编号', sortable: false},
                {prop: 'introduce', label: '直播间介绍', sortable: false},
                {prop: 'pushUrl', label: '推流地址', sortable: false},
                {prop: 'pushExpire', label: '推流地址过期时间', sortable: false},
                {prop: 'ct', label: '创建时间', sortable: false},
                {prop: 'type', label: '主播类型', sortable: false},
                {prop: 'userId', label: '用户id', sortable: false},
            ],

            //主播信息
            liveUserInfoName: '主播信息',
            getLiveUserInfoVisible: false, // 属性值列表页 隐藏
            dialogFormVisibleLiveUserInfo: false, // 默认不显示弹出框
            LoadingLiveUserInfo: true,
            tableListLiveUserInfo: [], // 表格数据源
            columnLiveUserInfo: [
                {prop: 'userNum', label: '用户编号', sortable: false},
                {prop: 'mobile', label: '手机号', sortable: false},
                {prop: 'headImg', label: '头像', sortable: false, imgFlag: true},
                {prop: 'userName', label: '用户名', sortable: false},
                {prop: 'signature', label: '人生格言', sortable: false},
                // {prop: 'role',  label: '角色',  sortable:false  },
                {prop: 'age', label: '年龄', sortable: false},
                {prop: 'parentId', label: '所属第三方机构', sortable: false},
                {
                    prop: 'deviceModel', label: '1安卓2ios', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '安卓', value: 1, type: 'success'},
                        {text: 'ios', value: 2, type: 'warn'},
                    ]
                },
                {prop: 'registerTime', label: '注册时间', sortable: false},
            ],
        }
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            getJdLiveRecordList(this.pageRequest).then(response => {
                response = response.result
                this.tableList = response.content
                this.tableTotal = response.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest.pageNum = '1'
            this.pageRequest.pageSize = '10'
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 直播间信息
        handleLive(liveId) {
            this.liveId = liveId
            this.listLoadingLive = true
            this.getLiveListVisible = true
            //【API请求】----获取表格列表数据
            const params = {
                liveId: liveId,
            }
            getLiveInfo(params).then(response => {
                response = response.result
                this.tableListLive = response
                this.listLoadingLive = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //【按钮点击】--- 主播信息
        handleLiveUser(userId) {
            this.LoadingLiveUserInfo = true
            this.getLiveUserInfoVisible = true
            //【API请求】----获取表格列表数据
            const params = {
                userId: userId,
            }
            getLiveUserInfo(params).then(response => {
                response = response.result
                this.tableListLiveUserInfo = response
                this.LoadingLiveUserInfo = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //初始化表单数据，重新渲染
        initDataForm() {
            this.dataForm = {
                id: '',
                title: '',
                liveLogo: '',
                liveId: '',
                startTime: '',
                endTime: '',
            };
        },
        //关闭表单弹出框
        liveCloseDialog() {
            this.getLiveListVisible = false
        },
        liveUserInfoCloseDialog() {
            this.getLiveUserInfoVisible = false
        },
    },
    created() {
        this.getList();
    },
}
</script>
